<template>
  <div class="w-full bg-[#f7f7f7]" id="div-1">
    <!-- <div class="m-auto w-3/5 bg-[#fff]">1231</div> -->

    <div class="m-auto w-3/5 pb-8" id="div-27">
      <a-row :gutter="15" id="div-28">
        <a-col :span="7" class="h-full" id="div-51">
          <div class="bg-[#fff] border-solid border border-[#ccc]" id="div-52">
            <div class="text-[16px] leading-[40px] text-[#666] bg-[#f7f7f7] pl-[10px] mb-[10px]" id="div-53"> 热门文章 </div>
            <a-row class="flex px-[10px]" v-for="(item, index) in a" :key="index" :id="`div-54-${index}`" :gutter="10">
              <a-col :span="8" :id="`div-55-${index}`">
                <a-image :src="item.avatar" width="100%" height="100%" class="object-cover aspect-[4/3]" :id="`div-56-${index}`" />
              </a-col>
              <a-col :span="16" class="" :id="`div-57-${index}`">
                <a-typography-link href="#" class="!text-[#666] text-[14px] mt-2 !mb-0 pl-[10px]" :id="`div-58-${index}`">
                  {{ item.content }}
                </a-typography-link>
                <a-typography-paragraph class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none" :id="`div-59-${index}`"
                  >02-05</a-typography-paragraph
                >
              </a-col>
              <a-divider class="my-[10px]" :id="`div-60-${index}`" /> </a-row
          ></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="jsx">
  const a = ref([
    {
      avatar: 'https://picsum.photos/id/1/100/75',
      content: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
    },
    {
      avatar: 'https://picsum.photos/id/2/100/75',
      content: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
    },
    {
      avatar: 'https://picsum.photos/id/3/100/75',
      content: '笔记本电脑十佳型号（2024年2月小虫排行榜 轻薄游戏高端综合榜）',
    },
    {
      avatar: 'https://picsum.photos/id/4/100/75',
      content: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
    },
    {
      avatar: 'https://picsum.photos/id/5/100/75',
      content: '十大高性价比游戏本（小虫2024年11月游戏本排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/6/100/75',
      content: '饥望图灵眼欲穿，遥遥无期怎么办：二手显卡性价比型号选购指南',
    },
    {
      avatar: 'https://picsum.photos/id/7/100/75',
      content: '十大游戏显卡排行（2022年6月排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/8/100/75',
      content: '十大高性价比显示器（2024年11月小虫排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/9/100/75',
      content: '十大高端游戏本（2024年2月高配置笔记本小虫排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/10/100/75',
      content: '你准备买哪张车票？——华硕微星技嘉主板的系列介绍',
    },
    {
      avatar: 'https://picsum.photos/id/11/100/75',
      content: '十大高性价比固态硬盘（小虫2022年6月排行） 附问答：120GB固态硬盘够用吗',
    },
    {
      avatar: 'https://picsum.photos/id/12/100/75',
      content: '2024笔记本电脑十大品牌 （小虫笔记本品牌排行）',
    },
  ]);
</script>

<style></style>
